<script lang="ts" setup>
import { ref, computed } from 'vue'
import type { IFieldProps } from './interface'

// Define types for better type safety
type TableSize = 'large' | 'default' | 'small'
type PaginationMode = 'default' | 'auto' | 'socall'

interface TableConfig {
  size: TableSize
  fields: string[]
  paginationModal: PaginationMode
}

interface FieldOption {
  key: string
  label: string
}
// Props

interface ComponentProps {
  fields?: IFieldProps[]
}

// Props with defaults
const props = withDefaults(defineProps<ComponentProps>(), {
  fields: () => [],
})

// Convert fields to options with computed property
const fieldsList = computed<FieldOption[]>(() =>
  props.fields.map((field: IFieldProps) => ({
    key: field.prop,
    label: field.label,
  })),
)

const checkAll = ref(false)
const isIndeterminate = ref(false)
const drawerVisible = ref(false)

const tableConfig = ref<TableConfig>({
  size: 'default',
  fields: [],
  paginationModal: 'default',
})

// Handle check all change
const handleCheckAllChange = (val: boolean): void => {
  tableConfig.value.fields = val ? fieldsList.value.map((i) => i.key) : []
  isIndeterminate.value = false
}

// Handle individual checkbox changes
const handleFieldSelectionChange = (selectedFields: string[]): void => {
  const checkedCount = selectedFields.length
  checkAll.value = checkedCount === fieldsList.value.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < fieldsList.value.length
}
</script>

<template>
  <el-tooltip effect="dark" content="设置表格列属性" placement="top">
    <el-button type="primary" icon="Setting" plain @click="drawerVisible = true" />
  </el-tooltip>

  <el-drawer
    class="header-mb-0 body-p-0"
    v-model="drawerVisible"
    title="表格设置"
    size="360px"
    append-to-body
  >
    <template #default>
      <el-scrollbar>
        <div class="px-6">
          <!-- Basic Settings -->
          <el-divider class="divider" content-position="center">
            <el-icon>
              <MessageBox />
            </el-icon>
            基础设置
          </el-divider>
          <div class="setting-box">
            <div class="setting-item">
              <span>尺寸</span>
              <el-radio-group v-model="tableConfig.size" size="small">
                <el-radio-button value="large">较大</el-radio-button>
                <el-radio-button value="default">默认</el-radio-button>
                <el-radio-button value="small">较小</el-radio-button>
              </el-radio-group>
            </div>
            <div class="setting-item">
              <span>分页模式</span>
              <el-radio-group v-model="tableConfig.paginationModal" size="small">
                <el-radio-button value="default">默认</el-radio-button>
                <el-radio-button value="auto">自适应</el-radio-button>
                <el-radio-button value="socall">滚动</el-radio-button>
              </el-radio-group>
            </div>
          </div>

          <!-- Field Settings -->
          <el-divider class="divider" content-position="center">
            <el-icon>
              <MessageBox />
            </el-icon>
            字段设置
          </el-divider>
          <div class="setting-box">
            <div class="setting-item">
              <div class="w-full">
                <el-checkbox
                  v-model="checkAll"
                  :indeterminate="isIndeterminate"
                  @change="handleCheckAllChange"
                >
                  全选
                  <span class="text-gray-600">
                    (<span class="text-red-600">{{ tableConfig.fields.length }}</span
                    >/ <span>{{ fieldsList.length }}</span
                    >)
                  </span>
                </el-checkbox>
                <el-checkbox-group
                  v-model="tableConfig.fields"
                  @change="handleFieldSelectionChange"
                >
                  <el-row :gutter="20">
                    <el-col :span="24" v-for="field in fieldsList" :key="field.key">
                      <el-checkbox :label="field.key">
                        {{ field.label }}
                      </el-checkbox>
                    </el-col>
                  </el-row>
                </el-checkbox-group>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button size="small" @click="drawerVisible = false">取消</el-button>
        <el-button type="primary" size="small">应用</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style scoped lang="less">
.divider {
  .el-icon {
    position: relative;
    top: 2px;
    right: 5px;
    font-size: 15px;
  }
}

.setting-box {
  margin-bottom: 30px;

  .setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0;

    span {
      font-size: 14px;
    }
  }
}
</style>
